import React, { Component } from 'react';
import styles from './index.module.scss';
import { withRouter } from 'next/router';
import { ReloadIcon } from '@radix-ui/react-icons';
import { connect } from 'react-redux';
import { update } from '@/utils/immutableUtil';

@withRouter
@connect(({ ppt, user }) => ({
  toolObj: ppt.toolObj,
}))
class Comp extends Component {
  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);
  render() {
    const { data, index, toolObj } = this.props;
    var isLoading = false;
    var id = data.id;
    if (toolObj[id]) {
      isLoading = true;
    }

    return (
      <div className={styles.container}>
        <div className={styles.toolGroup}>
          <div className={styles.toolText}>使用工具</div>
          <div className={styles.separator}></div>
        </div>
        <div className={styles.urlGroup}>
          <div className={styles.urlIcon}>
            {isLoading ? (
              <ReloadIcon className={styles.loadingIcon} />
            ) : (
              <i
                className="iconfont icon-duqu"
                style={{ fontSize: '16px' }}
              ></i>
            )}
          </div>
          <div className={styles.urlText}>{data.mcp_server_name} {data.description}</div>
        </div>
        <div className={styles.viewButton}>
          {/* <button disabled={isLoading}>{isLoading ? '处理中' : '查看'}</button> */}
        </div>
      </div>
    );
  }
}

export default Comp;
